<template>
  <div>
    <h1>首页 测试 头像上传 级联选择器</h1>
    <el-cascader
      v-model="form.stu_jg"
      :options="options"
      :props="area"
      @change="handleChange"
    ></el-cascader>

    <h1>将头像变为base64字符串</h1>
    <input type="file" @change="getFile" ref="testFile" />
    <img :src="form.stu_head_img" alt="" srcset="" />
  </div>
</template>

<script>
import ajax from "../../ajax/ajax";
import { Cascader } from "element-ui";
export default {
  name: "",
  props: [""],
  data() {
    return {
      options: [],
      area: {
        label: "name",
        value: "name",
        children: "children",
      },
      form: {
        stu_jg: [],
        stu_head_img: "",
      },
    };
  },

  components: {
    "el-cascader": Cascader,
  },

  computed: {},

  beforeMount() {},

  async mounted() {
    // options是级联选择器的数据源
    let result = await ajax("get", "area", {}, "form");
    console.log(result);
    this.options = result;
  },

  methods: {
    handleChange(value) {
      console.log(value);
    },
    getFile() {
      console.log("xxx");
      let that = this;
      console.log(this.$refs.testFile);
      let f = this.$refs.testFile.files[0];
      console.log(f);
      let fr = new FileReader();
      fr.readAsDataURL(f);
      fr.onload = function () {
        console.log(fr.result);
        that.form.stu_head_img = fr.result;
      };
    },
  },

  watch: {},
};
</script>
<style lang='' scoped>
</style>